<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        添加房产信息
    </title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <link href="css/main.css" media="all" rel="stylesheet">
    <script src="lib/loading/okLoading.js" type="text/javascript"></script>

    <style>
        .imgs {
            display: none;
        }
    </style>
</head>
<body>
<div class="x-body">
    <form action="" class="layui-form layui-form-pane" id="add">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <input name="id" type="hidden" value=""/>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>栋数
                        </label>
                        <div class="layui-input-block">
                            <select id="building_id" lay-verify="required" name="building_id">
                                <option value="">请选择栋数</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>单元号
                        </label>
                        <div class="layui-input-block">
                            <input autocomplete="off" class="layui-input" lay-verify="required|number"
                                   name="unit_number" placeholder="请输入单元号" type="text">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>房间号
                        </label>
                        <div class="layui-input-block">
                            <input autocomplete="off" class="layui-input" lay-verify="required" name="room_number"
                                   placeholder="请输入房间号" type="text">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>房间面积
                        </label>
                        <div class="layui-input-block">
                            <input autocomplete="off" class="layui-input" lay-verify="required|number"
                                   name="room_area" placeholder="请输入房间面积" type="text">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <button class="layui-btn" lay-filter="add" lay-submit="" type="button">
                            保存
                        </button>
                    </div>
                    <!--</form>-->
                    <div style="height:100px;"></div>
                </div>

            </div>

        </div>
    </form>
</div>
<script charset="utf-8" src="lib/layui/layui.js"></script>
<script charset="utf-8" src="js/x-layui.js"></script>
<script charset="utf-8" src="js/jquery.min.js"></script>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/request.js"></script>
<!--<script src="/static/xiyuan/js/jquery.js" charset="utf-8"></script>-->
<script>

    layui.use(['laydate', 'element', 'layer', 'form'], function () {
        $ = layui.jquery;//jquery

        // 新增：获取URL参数中的ID
        var urlParams = new URLSearchParams(window.location.search);
        var id = urlParams.get('id');

        // 如果是编辑操作，加载已有数据
        if (id) {
            loadHomeData(id);
        }
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        layer = layui.layer;//弹出层


        form = layui.form();
        okLoading.close($);
        form.render();
        var start = {
            min: laydate.now()
            , max: '2099-06-16 23:59:59'
            , istoday: false
            , choose: function (datas) {
                //end.min = datas; //开始日选好后，重置结束日的最小日期
                //end.start = datas //将结束日的初始值设定为开始日
            }
        };

        // document.getElementById('LAY_demorange_s').onclick = function () {
        //     start.elem = this;
        //     laydate(start);
        // };
        // 渲染楼栋信息到下拉框上
        $.ajax({
            url: "/admin/stuff/buildsDetails",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                var html = '<option value="">请选择栋数</option>';
                $.each(data.data, function (index, item) {
                    html += '<option value="' + item.buildingId + '">' + item.buildingNumber + '</option>';
                });
                $("#building_id").html(html);
                form.render('select');
            }
        });

        //监听提交
        form.on('submit(add)', function (data) {
            var formData = data.field;
            console.log(formData)
            $.ajax({
                type: "post",
                url: "/admin/property/add",
                contentType: "application/json", // 明确指定发送JSON格式
                data: JSON.stringify({ // 将数据转为JSON字符串
                    buildingId: formData.building_id,
                    unitNumber: formData.unit_number,
                    roomNumber: formData.room_number,
                    floorArea: formData.room_area
                }),
                dataType: "json", // 预期服务器返回JSON
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 6, time: 2000}, function () {
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 2000});
                    }
                },
                error: function (xhr) { // 添加错误处理
                    console.log(xhr.responseText);
                    layer.msg('请求失败: ' + xhr.status, {icon: 5, time: 2000});
                }
            });

            return false;
        });
        form.on('select(aihao)', function (data) {
            communidy();
        });
        $(function () {
            communidy();
        });

        //communidy();
        function communidy() {
            var communidy = $("#community_id").val();

            $.ajax({
                url: "/xiyuan/home/building.html",
                type: "post",
                dataType: "json",
                data: {communidy: communidy},
                success: function (data) {

                    var dlen = data.length;
                    var str = '';
                    for (var i = 0; i < dlen; i++) {
                        var dt = data[i];
                        str += '<option value="' + dt.id + '">';
                        str += dt.buildings_name;
                        str += '</option>';
                    }

                    $("#building_id").html(str);
                    form.render('select', 'aihao');
                    //form.render('#building_id');

                }
            })
        }
    })

    function loadHomeData(id) {
        $.ajax({
            url: "/xiyuan/home/getById",
            type: "get",
            data: {id: id},
            success: function (data) {
                if (data.code === 200) {
                    // 填充表单数据
                    $("input[name='id']").val(data.data.id);
                    $("input[name='home_name']").val(data.data.home_name);
                    // 其他字段同理...

                    // 特别注意小区和栋数的联动
                    $("#community_id").val(data.data.community_id);
                    form.render('select');

                    // 触发栋数加载
                    communidy().then(function () {
                        $("#building_id").val(data.data.building_id);
                        form.render('select');
                    });
                }
            }
        });
    }
</script>
<!--栏目缩略图上传-->
<script>

    /*$("#community_id").blur(function(){
        communidy()
    });*/


    //window.onload = communidy;

</script>

</body>
</html>